<script setup>

import SettingHeader from "@/components/SettingHeader.vue";
import {ref} from "vue";
import {useUserStore} from "@/stores/UserStore.js";
import axios from "axios";

const title = ref("安全与绑定")
const description = ref("")
const userInfo = useUserStore()
const changePhone = async (event, p) => {
  const phone = event.target.value;
  if (phone.length < 11) {
    description.value = "手机号长度错误"
    return
  }
  if ((await axios.post("http://localhost:8081/user/update", {
    phone: phone || userInfo.getUserInfo.phone,
    password: p || userInfo.getUserInfo.password,
    account: phone || userInfo.getUserInfo.phone,
    id: userInfo.getUserInfo.id
  }, {
    headers: {
      'Content-Type': 'application/json', // 设置请求头
    }
  })).data) {
    const tempUser = userInfo.getUserInfo
    tempUser.phone = phone || userInfo.getUserInfo.phone
    tempUser.password = p || userInfo.getUserInfo.password
    userInfo.login(tempUser)
  }
}

const ps = async (event) => {
  const p = event.target.value;
  event.target.value = null
  await changePhone(event, p);
}
</script>

<template>
  <SettingHeader :title = "title" :url="{name:'setting'}" />
  <div>
    <ul class = "p-2">
      <li class = "d-flex border p-2" @click = ""><span>手机号: <input type = "number" @change = "changePhone"
                                                                       id = "phone"
                                                                       :value = "userInfo.getUserInfo.phone"
                                                                       class = "input"></span><span
          class = "p-1"><label for = "phone">更换绑定</label></span>
      </li>
      <li class = "d-flex border p-2" @click = ""><span>修改密码<input type = "text" @change = "ps"
                                                                       id = "password"
                                                                       value = ""
                                                                       class = "input"></span><span class = "p-1"><label
          for = "password">修改密码</label></span></li>
    </ul>
  </div>
  <span>{{ description }}</span>
</template>

<style scoped>

div {
  width: 98%;
}

ul {
  margin: 0;
  padding: 0;
}

.input {
  outline: none;
  border: none;
  width: 200px;
}

.input:focus {
  border-bottom: 1px solid black;
}

li {
  margin: auto;
  position: relative;
  height: 50px;
  cursor: pointer;
}

li span:first-child {
  line-height: 32px;
}

li span:last-child {
  position: absolute;
  right: 3%;
  padding: 2px;
  background-color: black;
  color: white;
  cursor: pointer;
}
</style>